<template>
  <div>
    <div>
      <a-button type="primary" size="small" @click="addClick()">
        添加
      </a-button>
      <add-work-com ref="AddWorkCom" @success="loadModels" />
    </div>
    <br />
    <a-table border :columns="columns" :data-source="models" row-key="_id">
      <template slot="icon" slot-scope="_,item">
        <img width="200px" height="200px" class="w-img-cover" :src="item.icon | ImageFill(200, 200)" alt="">
      </template>
      <template slot="name" slot-scope="_,item">
        <a :href="item.url" target="_blank">{{ item.name }}</a>
      </template>
      <template slot="daterange" slot-scope="_,item">
        <span>
          {{ item.startTime | DateFormat('YYYY/MM/DD') }} - {{ item.endTime | DateFormat('YYYY/MM/DD') }}
        </span>
      </template>
      <template slot="option" slot-scope="_,item">
        <a-button type="primary" size="small" style="margin-right: 5px" @click="addClick(item)">
          编辑
        </a-button>
        <a-button type="danger" size="small" @click="removeClick(item)">
          删除
        </a-button>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { AddWorkCom, AddWorkComType } from '@/components/admin/web/work/add'
import Work from '~/models/work'

@Component({
  name: 'AdminWebWork',
  layout: 'admin',
  head () {
    return {
      title: '工作经历'
    }
  },
  components: {
    AddWorkCom
  },
  async asyncData () {
    const list = await Work.list()
    return { models: list }
  }
})
export default class AdminWebWork extends Vue {
  models: Array<Work> = []

  columns = [
    {
      title: '图片',
      scopedSlots: { customRender: 'icon' },
      width: 240,
      key: 'icon',
    },
    {
      title: '名称',
      scopedSlots: { customRender: 'name' },
      key: 'name'
    },
    {
      title: '说明',
      key: 'detail',
      dataIndex: 'detail',
    },
    {
      title: '职责',
      key: 'obligation',
      dataIndex: 'obligation',
    },
    {
      title: '时间',
      scopedSlots: { customRender: 'daterange' },
      width: 200
    },
    {
      title: '操作',
      scopedSlots: { customRender: 'option' },
      width: 150,
    }
  ]

  async loadModels () {
    this.models = await Work.list()
  }

  addClick (model?: Work) {
    (this.$refs.AddWorkCom as AddWorkComType).show(model)
  }

  removeClick (model: Work) {
    this.$confirm({
      title: '刪除提示',
      content: `確定要刪除【${model.name}】嘛？`,
      onOk: () => {
        const skillsModel = Work.creatModelWithJson(model)
        skillsModel.deleteModel().then(() => {
          this.loadModels()
          this.$message.success('删除成功')
        })
      }
    })
  }
}
</script>

<style scoped>

</style>
